<template>

  <div class="registry-container" :style="{
    top: showRegistry ? '-20vh' : '-120vh',
    opacity: showRegistry ? '1' : '0',
  }">
    <div style="width: 100vw;height: 100vh;margin-top: 20vh;" class="flex-center">
      <div style="min-width: 360px;position: relative;" class="has-shadow rounded-32">
        <div style="position: absolute;z-index: -1;width: 100%;height: 100%;background-color: white;opacity: 0.75" class="rounded-32"></div>
        <div style="padding: 0 40px 40px;text-align: center;">
          <img src="../assets/logo.svg" alt="LOGO" style="height: 64px;margin: 64px auto 0;">
          <p style="font-size: 12px;">让创作变得更有乐趣</p>
          <form id="login-form" @submit="(event)=>{event.preventDefault();registry();}">
            <el-input v-model="registryData.nickname" class="no-border-input" placeholder="昵称"></el-input>
            <el-input v-model="registryData.account" class="no-border-input" placeholder="账号"></el-input>
            <el-input v-model="registryData.password" class="no-border-input" placeholder="密码" show-password></el-input>
            <el-input v-model="registryData.inviteCode" class="no-border-input" placeholder="邀请码"></el-input>
            <div style="display: flex;align-items: center;">
              <el-input v-model="registryData.captcha" class="no-border-input" placeholder="验证码"></el-input>
              <img style="height: 38px;margin: 8px 0 0 12px;border-radius: 6px;" :src="captchaImg" alt="验证码" @click="getCaptchaImg">
            </div>
            <el-button @click="registry" type="primary" style="width: 100%;margin-top: 24px;">注册</el-button>
            <el-button
                @click="()=>{
                  loginData = {account: registryData.account,password: '',captcha: ''}
                  showRegistry = false;
                }"
                style="width: 100%;margin-top: 12px;margin-left: 0;">前往登录</el-button>
            <button type="submit" style="opacity: 0;position: absolute;"></button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div style="width: 100vw;height: 100vh;" class="flex-center">

    <div style="min-width: 360px;" class="has-shadow rounded-32">
      <div style="padding: 0 40px 40px;text-align: center;">
        <img src="../assets/logo.svg" alt="LOGO" style="height: 64px;margin: 64px auto 0;">
        <p style="font-size: 12px;">让创作变得更有乐趣</p>
        <form id="login-form" @submit="(event)=>{event.preventDefault();login();}">
          <el-input v-model="loginData.account" class="no-border-input" placeholder="邮箱地址或社团ID"></el-input>
          <el-input v-model="loginData.password" class="no-border-input" placeholder="密码" show-password></el-input>
          <div style="display: flex;align-items: center;">
            <el-input v-model="loginData.captcha" class="no-border-input" placeholder="验证码"></el-input>
            <img style="height: 38px;margin: 8px 0 0 12px;border-radius: 6px;" :src="captchaImg" alt="验证码" @click="getCaptchaImg">
          </div>
          <span @click="forgetPassword" style="text-align: left;color: rgb(51, 100, 129);font-weight: 500;font-size: 14px;padding-top: 4px;cursor: pointer;padding-left: 4px;">忘记密码</span>
          <el-button @click="login" type="primary" style="width: 100%;margin-top: 24px;">登录</el-button>
          <el-button
              @click="()=>{
                registryData={nickname: '',account: '',password: '',inviteCode: '',captcha: '',};
                showRegistry = true;
              }"
              style="width: 100%;margin-top: 12px;margin-left: 0;"
          >注册</el-button>
          <button type="submit" style="opacity: 0;position: absolute;"></button>
        </form>
        <p style="max-width: 320px;font-weight: 500;font-size: 12px;color: #858585;margin-top: 16px;text-align: left;">
          This site is for learning and communication purposes only. Please do not publicly disseminate it.
        </p>
      </div>
    </div>

  </div>

</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import {getCaptchaRequest, loginRequest} from "../api/login.ts";
import {handleResponseMessage, messageInfo, messageSuccess, messageWarning} from "../util/message.ts";
import {useRouter} from "vue-router";
import {isNullOrWhiteSpace} from "../util/common.ts";
import {registryUserRequest} from "../api/user.ts";

const router = useRouter();

const registryData = ref({
  nickname: "",
  account: "",
  password: "",
  inviteCode: "",
  captcha: "",
});

const showRegistry = ref(false);

const loginData = ref({
  account: "",
  password: "",
  captcha: ""
});
const captchaImg = ref("");

const getCaptchaImg = async () => {
  captchaImg.value = (await getCaptchaRequest()).data;
}

const login = async () => {
  // 检查账号密码
  if (isNullOrWhiteSpace(loginData.value.account)){
    messageWarning("账号不能为空");
    return;
  }
  if (isNullOrWhiteSpace(loginData.value.password)){
    messageWarning("密码不能为空");
    return;
  }
  if (isNullOrWhiteSpace(loginData.value.captcha)){
    messageWarning("验证码不能为空");
    return;
  }
  const response = await loginRequest(loginData.value.account, loginData.value.password, loginData.value.captcha);
  handleResponseMessage(response, "登录成功");
  if (response.success){
    await router.push("/user")
  }else {
    await getCaptchaImg();
  }
}

const registry = async () => {
  const response = await registryUserRequest(registryData.value);
  if (response.data.success){
    messageSuccess("注册成功");
    registryData.value = {nickname: '',account: '',password: '',inviteCode: '',captcha: '',};
  }else {
    messageWarning(response.data.message);
  }
  await getCaptchaImg();
}

const forgetPassword = async () => {
  messageInfo("功能开发中...");
}

onMounted(async ()=>{
  await getCaptchaImg();
})

</script>

<style scoped>

.registry-container{
  width: 100vw;
  height: 120vh;
  position: absolute;
  z-index: 999;
  transition: 650ms cubic-bezier(0, 0.1, 0.1, 1.3);

  background-image: url("../assets/img/registry.jpg");
  background-size: cover;
  background-position: center;
}

#login-form{
  max-width: 320px;
  margin-top: 24px;
  padding-top: 16px;
  padding-bottom: 32px;
  border-top: rgb(242, 242, 242) 1px solid;
  border-bottom: rgb(242, 242, 242) 1px solid;
  text-align: left;
}

</style>

<style>

#login-form>button{
  padding: 18px 0;
  border-radius: 32px;
}

#login-form>button>span{
  font-weight: bold;
}

</style>
